<template>
  <div id="forgetPass">
    <header>
      <i @click="goBack()"></i>
      <div>忘记密码</div>
    </header>
    <ul class="">
      <li>
        <a>
          <img src="../../image/icon_phone.png" width="20" height="20" alt="">
          <input type="text" placeholder="请输入手机号" v-model="phone" @input="checkNum" required />
        </a>
      </li>
      <li>
        <a>
          <img src="../../image/icon_verification_code.png" width="20" height="20" alt="">
          <input type="text" placeholder="请输入验证码" v-model="code" required @click="testPhone" />
          <span @click='getCode()' v-show='!hasCode'>获取验证码</span>
          <span v-show='hasCode'>重新获取{{count}}s</span>
        </a>
      </li>
      <li>
        <a>
          <img src="../../image/icon_new_password.png" width="20" height="20" alt="">
          <input type="password" placeholder="设置新密码" v-model="password" required />
        </a>
      </li>
      <li>
        <a class="confirmBtn" @click="finish">
          完 成
        </a>
      </li>

    </ul>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        list: [],
        phone: '',
        password: '',
        code: '',
        hasCode: false, //是否有验证码 默认无 发送后一分钟内是true 然后false
        time_count: 60, //倒计时时间
        count: '', //60s倒计时
        timer: null, //计时器
      }
    },
    components: {

    },
    methods: {
      //完成修改
      finish() {
        if (!this.phone) {
          this.$utils._toast("手机号不能为空");
          return false;
        } else if (!/^1(3|4|5|7|8|9)\d{9}$/.test(this.phone)) {
          this.$utils._toast("手机号码有误，请重填");
          return false;
        } else if (!this.code) {
          this.$utils._toast("验证码不能为空");
          return false;
        } else if (!this.password) {
          this.$utils._toast("密码不可为空");
          return false;
        } else {
          //修改密码
          const data = {
            tele: this.phone,
            pass: this.password
          };
          console.log(data);
          this.$api.post(this.$api.baseURLSchool, "phone/pass_reset/" + this.code, data, r => {
            console.log(r);
            if (r.data.ret == 1) { //验证码发送成功后开始60s倒计时
              this.$utils._toast('密码重置成功,1s后跳转');
              const that = this;
              setTimeout(function () {
                that.$router.push({
                  name: 'login2'
                })
              }, 1000);
            } else if (r.data.ret == -1) {
              this.$utils._toast('验证码错误');
            }
          }, err => {
            console.log(err);
          })
        }
      },
      goBack() {
        this.$router.push({
          path: '/login1'
        })
      },
      //校验手机号
      checkNum(e) {
        var value = e.target.value;
        e.target.value = value.replace(/[^\d]/g, '');
        this.phone = e.target.value;
      },
      //点击获取验证码
      getCode() {
        if (this.phone == "") {
          this.$utils._toast("手机号不能为空");
          return false;
        } else if (!/^1(3|4|5|7|8|9)\d{9}$/.test(this.phone)) {
          this.$utils._toast("手机号码有误，请重填");
          return false;
        } else { //手机号码有效
          if (!this.timer) {
            const obj = {
              phone: this.phone
            };
            this.$api.post(this.$api.baseURLSchool, "send_code/modify", obj, r => {
              console.log(r);
              if (r.data.ret == 1) { //验证码发送成功后开始60s倒计时
                this.count = this.time_count;
                this.hasCode = true;
                this.timer = setInterval(() => {
                  if (this.count > 0 && this.count <= this.time_count) {
                    this.count--;
                  } else {
                    this.hasCode = false;
                    clearInterval(this.timer);
                    this.timer = null;
                  }
                }, 1000)
              } else if (r.data.ret == -1) {
                this.$utils._toast('获取验证码频繁，请稍后再试');
              }
            }, err => {
              console.log(err);
            })
          }
        }
      },
      aa() {
        console.log(this.type);
      },
      testPhone() {
        if (this.phone == "") {
          this.$utils._toast("手机号不能为空");
          return false;
        } else if (!/^1(3|4|5|7|8|9)\d{9}$/.test(this.phone)) {
          this.$utils._toast("手机号码有误，请重填");
          return false;
        }
      },
    },
    created() {
      // this.$api.get("topics", null, r => {
      // 	console.log(r);
      // 	this.list = [1,2,3];	
      // })
    },
    mounted() {}
  }

</script>
<style lang="scss">
</style>
